<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="8">
                <el-card shadow="hover" class="mgb20" style="height:250px;">
                    <div class="user-info">
                        <img src="../../assets/icon_Defalt.png" class="user-avator" alt />
                        <div class="user-info-cont">
                            <div class="user-info-name">{{ username }}</div>
                            <div>{{ userrole }}</div>
                        </div>
                    </div>
                    <div class="user-info-list">
                        <el-row type="flex" justify="center">{{ this.str }}</el-row>
                    </div>
                </el-card>
                <el-card>
                    <el-row type="flex" justify="center">M B T I 数据管理平台介绍</el-row>
                    <br />
                    <el-row type="flex" justify="center">1. 作为管理员，可以对本校的学院\专业\班级\学生进行信息编辑工作</el-row>
                    <el-row type="flex" justify="center">2. 作为管理员，可以对本系统的题目\全部测试结果进行信息编辑工作</el-row>
                    <el-row type="flex" justify="center">3. 作为管理员，可以使用“数据可视化”功能更直观的查看测试数据</el-row>
                    <hr>
                    <el-row type="flex" justify="center">M B T I 数据管理功能简介</el-row>
                    <br />
                    <el-row type="flex" justify="center">1. 我们为您提供模糊查询功能，让您更方便的管理。</el-row>
                    <el-row type="flex" justify="center">2. 我们为您提供多级管理功能，让您更灵活的管理。</el-row>
                    <el-row type="flex" justify="center">3. 我们为您提供数据可视功能，让您更直观的管理。</el-row>
                    <hr>
                    <el-row type="flex" justify="center">关 于</el-row>
                    <br />
                    <el-row type="flex" justify="center">后端搭建 Defalt</el-row>
                    <el-row type="flex" justify="center">前端搭建 Defalt</el-row>
                    <el-row type="flex" justify="center">QQ: 844191153 | Phone: 15848566846</el-row>
                </el-card>
            </el-col>
            <el-col :span="16">
                <el-row :gutter="20" class="mgb20">
                    <el-col :span="8">
                        <el-card shadow="hover" :body-style="{ padding: '0px' }">
                            <div class="grid-content grid-con-1">
                                <div class="grid-cont-right">
                                    <div class="grid-num">{{ visit }}</div>
                                    <div>用户访问量</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card shadow="hover" :body-style="{ padding: '0px' }">
                            <div class="grid-content grid-con-2">
                                <div class="grid-cont-right">
                                    <div class="grid-num">{{ stuNum }}</div>
                                    <div>学生数量</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card shadow="hover" :body-style="{ padding: '0px' }">
                            <div class="grid-content grid-con-3">
                                <div class="grid-cont-right">
                                    <div class="grid-num">{{ topicNum }}</div>
                                    <div>题目数量</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
                <el-card shadow="always">
                    <el-row type="flex" justify="center"><img src="../../assets/bg.png" /></el-row>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            time: this.getNowTime(),
            username: window.sessionStorage.getItem("username"),
            userrole: window.sessionStorage.getItem("identify"),
            visit: 0,
            stuNum: 0,
            topicNum: 0,
            date: new Date(),
            str: "",
        };
    },
    mounted() {
        this.setWelcome();
        this.setNum();
    },
    methods: {
        setWelcome() {
            if (this.date.getHours() >= 6 && this.date.getHours() < 12) {
                this.str = "阳光明媚，效率翻倍！";
            } else if (this.date.getHours() >= 12 && this.date.getHours() < 18) {
                this.str = "微风不燥，工作高效！";
            } else {
                this.str = "加油，深夜仍然努力的你！";
            }
        },
        getNowTime(val) {
            let date = new Date();
            if (val) {
                date = new Date(date.getTime() + 86400000 * val);
            }
            var seperator1 = "-";
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var strDate = date.getDate();
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = "0" + strDate;
            }
            var currentdate = year + seperator1 + month + seperator1 + strDate;
            return currentdate;
        },
        async setNum() {
            const { data: res } = await this.$http.post("api/query/result", {
                Sno: "",
                Pno: "",
            });
            this.visit = res.Data["ret"].length;
            const { data: ret } = await this.$http.post("api/query/studentAll");
            this.stuNum = ret.Data["ret"].length;
            const { data: ans } = await this.$http.post("api/query/questionAll");
            this.topicNum = ans.Data["ret"].length;
        }
    }
};
</script>

<style scoped>
.el-row {
    margin-bottom: 2%;
}

.grid-content {
    display: flex;
    align-items: center;
    height: 100px;
}

.grid-cont-right {
    flex: 1;
    text-align: center;
    font-size: 14px;
    color: #999;
}

.grid-num {
    font-size: 30px;
    font-weight: bold;
}

.grid-con-1 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-2 .grid-num {
    color: rgb(10, 216, 13);
}

.grid-con-3 .grid-num {
    color: rgb(242, 94, 67);
}

.user-info {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 2px solid #ccc;
    margin-bottom: 20px;
}

.user-avator {
    width: 120px;
    height: 120px;
    border-radius: 50%;
}

.user-info-cont {
    padding-left: 50px;
    flex: 1;
    font-size: 14px;
    color: #999;
}

.user-info-cont div:first-child {
    font-size: 30px;
    color: #222;
}

.user-info-list {
    font-size: 20px;
    color: #999;
    line-height: 25px;
}

.mgb20 {
    margin-bottom: 20px;
}

.el-card {
    size: auto;
}
</style>
